<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.d1 {
				border: 2px solid red;
				width: 200px;
			}

			.d2 {
				border: 2px solid blue;
				width: 200px;
			}
		</style>
	</head>
	<body>
		<div id="div1">div1</div>
		<div id="div2">div2</div>
		<script>
			var div1 = document.getElementById("div1");
			div1.onclick = function() {
				// 通过属性的style直接设置
				div1.style.border = "1px solid red";
				div1.style.width = "200px";
				// font-size
				div1.style.fontSize = "50px";
			}

			// 通过类选择器来设置样式
			var div2 = document.getElementById("div2");
			div2.onclick = function() {
				// 使用className来设置
				div2.className = "d1";

			}
		</script>
	</body>
</html>
